<template>
  <div>
    <el-card shadow="never">
      <h3>消息列表</h3>
    </el-card>
    <br>
    <el-card shadow="never">
      <h3>沟通列表</h3>
      <el-collapse v-model="activeName" accordion>

        <el-collapse-item v-for="(arr,index) in tableData" :key="index" :name="index">
          <template slot="title">
            <!-- 显示聊天对象 -->
            <div>{{ arr[0].fromUserId === user.id ? arr[0].toUser.nickName : arr[0].fromUser.nickName }}</div>
          </template>
          <div>
            <div v-for="i in arr" :key="i.id">
              <span v-if="i.fromUserId!==user.id" class="realname">{{ i.fromUser.nickName }}:</span>
              <span v-if="i.fromUserId===user.id" class="realname">我:</span>
              <span>{{ i.content }}</span>
              <span style="font-size:12px;color:#cdcdcd;float:right;">{{ i.createTime|formatDate2 }}</span>
            </div>
          </div>
          <!-- <el-input v-model="item.content" style="color:red !important;" type="textarea" :rows="5" disabled /> -->

          <el-input v-model="addForm.content" style="margin:16px 0 8px 0;" type="textarea" :rows="3" placeholder="请输入回复内容" />
          <el-button size="mini" type="primary" @click="addReplyBtn(arr)">回复</el-button>
        </el-collapse-item>

      </el-collapse>
    </el-card>

  </div>
</template>

<script>
import { list } from '@/api/user'
import * as messageApi from '@/api/message'
import { getUser } from '@/utils/auth'
import moment from 'moment'
export default {
  name: '',
  data() {
    return {
      tableData: [],
      activeName: '0',
      user: getUser(),
      addForm: {},
      addVisible: false,
      toUser: {},
      content: ''
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      messageApi.list().then(res => {
      // 和这个用户有关的消息
        const receiveList = res.data.filter(item => {
          return item.toUserId === getUser().id || item.fromUserId === getUser().id
        })
        const list = {}
        receiveList.forEach(message => {
          const fromId = message.fromUserId
          const toId = message.toUserId
          if (list[fromId + '-' + toId]) {
            list[fromId + '-' + toId].push(message)
          } else if (list[toId + '-' + fromId]) {
            list[toId + '-' + fromId].push(message)
          } else {
            list[fromId + '-' + toId] = []
            list[fromId + '-' + toId].push(message)
          }
        })

        Object.values(list).forEach(arr => {
          arr.sort((a, b) => {
            return new Date(a.createTime) - new Date(b.createTime)
          })
        })

        this.tableData = Object.values(list)
      })
    },
    addReplyBtn(arr) {
      this.addForm.fromUserId = getUser().id
      this.addForm.toUserId = arr[0].fromUserId === getUser().id ? arr[0].toUserId : arr[0].fromUserId
      messageApi.add(this.addForm).then(resp => {
        this.$message({
          message: '回复成功',
          type: 'success'
        })
        arr.push({
          content: this.addForm.content,
          fromUserId: getUser().id,
          toUserId: arr[0].fromUserId === getUser().id ? arr[0].toUserId : arr[0].fromUser,
          fromUser: getUser(),
          toUser: arr[0].fromUserId === getUser().id ? arr[0].toUser : arr[0].fromUser,
          createTime: moment(new Date()).format('yyyy-MM-DD HH:mm:ss')
        })
        this.addForm.content = ''
      })
    },
    addBtn(toUser) {
      this.content = ''
      this.toUser = toUser
      this.addVisible = true
    },
    confirmAddBtn() {
      const data = {
        fromUserId: getUser().id,
        toUserId: this.toUser.id,
        content: this.content
      }
      messageApi.add(data).then(resp => {
        this.$message({
          message: '发送成功',
          type: 'success'
        })
        this.getData()
        this.addVisible = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.realname{
  padding-right:16px;
  width:80px;
  display:inline-block;
  text-align: right;
}
</style>

